<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>price</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/all.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="PIE.js"></script>
    <script src="js/self.js"></script>
</head>
<body ontouchstart="">
<button onclick="Dialog($('#dialog'),$('.theme-popover-mask'));">点击我弹出对话框</button>
<!-- toast start -->
<div class="theme-popover-mask">

</div>
<div id="dialog" class="dialog pf w100 h100">
    <div class="jz of bcf br6 of">
        <div class="dialogTittle tc jz f17">
            订单详情
        </div>
        <div class="content jz lh18 f16 of">
            <div class="w100 clearfix of">
                <p class="f16 c6 fl">单价：</p>
                <input id="danjia" class="text_box fl" name="" type="text" value="3.5" style="margin-left: 64px" onkeyup="inputChange($('#text_box'),$('#price'),$(this));"/>
                <p class="f16 c6 fl">（元）</p>
            </div>
            <div class="w100 clearfix of mgt20">
                <p class="f16 c6 fl">数量：</p>
                <input id="min" class="min fl dmin" name="" type="button" value="-" onclick="minCount($('#text_box'),$('#price'),$('#danjia'));"/>
                <input id="text_box" class="text_box fl" name="" type="text" value="1" onkeyup="inputChange($(this),$('#price'),$('#danjia'));"/>
                <input id="add" class="add fl dadd" name="" type="button" value="+" onclick="addCount($('#text_box'),$('#price'),$('#danjia'));"/>
            </div>
            <div class="w100 clearfix of mgt20">
                <p class="f16 c6">总价：<span id="price" class="price corange">3.5</span>（元）</p>
            </div>


        </div>
        <div class="button w100 of clearfix mgt10">
            <button id="sure" class="fl cf f15" style="width: 50%">确定</button>
            <button id="cancel" onclick="DialogClose($('#dialog'),$('.theme-popover-mask'))" class="fl cf f15" style="width: 50%;background: #CDCDCD;">取消</button>
        </div>
    </div>
</div>
<!-- toast end -->

<script>
    $(function () {
        var mgTop = ($(window).height()-265)/2-25;
        $('#dialog>div').css('margin-top',mgTop);

    })

    function Dialog(dialog,mask) {
        var dialog = dialog;
        var mask = mask;
        mask.fadeIn();
        dialog.slideDown();
    }
    function DialogClose(dialog,mask) {
        var dialog = dialog;
        var mask = mask;
        mask.fadeOut();
        dialog.slideUp();
    }
    function setTotal(countVal,price,danjia) {

        var price = price;
        var danjia = danjia;
        var danjiaPrice = danjia.val();
        var countVal = countVal;
        var priceTotal = danjiaPrice*countVal;
        price.text(priceTotal);
    }
    function addCount(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;
        count.val(parseInt(count.val())+1)
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
    function minCount(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;

        count.val(parseInt(count.val())-1)
        if(parseInt(count.val())<1||parseInt(count.val())==''){
            count.val(1);
        }
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
    function inputChange(count,price,danjia) {
        var count = count;
        var price = price;
        var danjia = danjia;
        var danjiaVal = danjia.val();
        console.log(danjiaVal);
        danjia.val(danjiaVal.replace(/[^0-9.]/g,''));

        if(danjiaVal < 0 || danjiaVal ==''){
            danjia.val('');
        }
        var countVal = count.val();
        setTotal(countVal,price,danjia);
    }
</script>

</body>
</html>